<template>
<div>
    <div class="top-button">
      <el-radio-group v-model="radio1" @change="bindClick">
        <el-radio-button label="zt" >暂停申购的基金</el-radio-button>
        <el-radio-button label="sg" >暂停赎回的基金</el-radio-button>
      </el-radio-group>
    </div>
    <div class="analyzeSystem">
      <el-row :gutter="12">
        <el-col :span="6" v-for="(item ,i) in shData" :key="i">
          <el-card shadow="never" :style="'background-color:'+ randomHexColor()">
              <h3>{{item.name}}</h3>
              <p>{{item.opendate}}</p>
          </el-card>
        </el-col>
      </el-row>
      <el-table
      :data="sgData"
      style="width: 100%">
      <el-table-column
        prop="name"
        label="名称"
        width="180">
      </el-table-column>
      <el-table-column
        prop="code"
        label="基金代号"
        width="180">
      </el-table-column>
      <el-table-column
        prop="suspenddate"
        label="暂停赎回日期">
      </el-table-column>
    </el-table>
    <el-pagination
      background
      layout="prev, pager, next"
      :total="1000">
    </el-pagination>
    </div>
</div>
  
</template>

<script>
export default {
  data() {
    return {
      radio1: 'zt',
      sgData:[],
      shData:[]
    };
  },
  mounted() {
    this.getztjjdata()
  },
  beforeDestroy() {

  },
  methods: {
    getztjjdata(){
       this.$axios.post(
         '/apis',
         '/fund/suspend/redee',
         {key:'2e29ce045a839c918692223c92fe0fb9'}
        ).then(res=>{
          console.log(res.result)
          let isdata = res.result[0]
          let isarr = []
          for(var k in isdata){
            isarr.push(isdata[k])
          }
          this.shData = isarr
       })
    },
    getshjjdata(){
      this.$axios.post(
         '/apis',
         '/fund/suspend/purch',
         {key:'2e29ce045a839c918692223c92fe0fb9'}
        ).then(res=>{
          console.log("22",res.result)
          let data = res.result[0]
          let arr =[]
          for(var i in data){
            arr.push(data[i])
          }
          this.sgData =arr
          // code: "160121"
          // name: "　南方金砖四国"
          // opendate: "-"
          // suspenddate: "2017-12-29"
       })
    },
    isZTSgdata(){ //暂停申购按钮事件
        this.getztjjdata()
    },
    handleZTSHdata(){  //暂停赎回的按钮事件
        this.getshjjdata()
    },
    bindClick(){
        if(this.radio1 == 'zt'){
            this.getztjjdata()
        }
        if(this.radio1 == 'sg'){
            this.getshjjdata()
        }
    },
    randomHexColor() { //随机生成十六进制颜色
      var hex = Math.floor(Math.random() * 16777216).toString(16); //生成ffffff以内16进制数
      while (hex.length < 6) { //while循环判断hex位数，少于6位前面加0凑够6位
        hex = '0' + hex;
      }
      return '#' + hex; //返回‘#'开头16进制颜色
      }
  }
};
</script>

<style lang="scss" scoped>
    .top-button{
        padding: 20px;
        text-align: left;
    }
    .analyzeSystem{
      padding: 20px;
    }
</style>